#box {
  width: 100vw;
  height: 100vh;
  overflow: auto;
}
.promise .top {
  position: relative;
  width: 100%;
}
.promise .top image {
  width: 100%;
  display: block;
}
.promise .top .dataRange {
  color: #ffffff;
  font-size: 3.73vw;
  padding: 0 3vw;
  position: absolute;
  line-height: 8vw;
  border-radius: 0 0 4vw 4vw;
  top: 0;
  margin-left: 50%;
  transform: translate(-50%);
  background-color: #FF9A09;
}
.promise .top .iconPool {
  width: 39vw;
  height: 8vw;
  position: absolute;
  top: 103vw;
  left: 31vw;
}
.promise .top .iconPool .text {
  width: 11vw;
  font-size: 3.2vw;
  line-height: 4vw;
  color: #fff;
  float: left;
}
.promise .top .iconPool .num {
  width: 5vw;
  height: 8vw;
  background-color: #fff;
  color: #CD2017;
  font-size: 6vw;
  font-weight: 700;
  text-align: center;
  float: left;
  margin-right: 1.5vw;
}
.promise .top .iconPool .dong {
  font-size: 3vw;
  background-color: #FFBA00;
  padding: 0 1vw;
  line-height: 4vw;
  border-radius: 4vw;
  color: #CD2017;
  position: absolute;
  right: 3vw;
  top: -4vw;
  z-index: 20;
  display: none;
}
.promise .top .iconPool .dong.on {
  display: block;
  animation: numdong 0.8s linear 1;
}
.promise .top .btn {
  position: absolute;
  width: 36vw;
  top: 122vw;
  left: 12vw;
  padding-left: 0;
  border: none;
}
.promise .top .btn .invite {
  width: 33vw;
}
.promise .top .join {
  position: absolute;
  width: 33vw;
  top: 122vw;
  right: 12vw;
}
.promise .top .finish {
  position: absolute;
  width: 34vw;
  top: 122vw;
  left: 32vw;
}
.promise .list {
  margin-top: -2px;
  padding: 0 4vw 4vw 4vw;
  background-color: #eca332;
}
.promise .list .rule {
  font-size: 3.2vw;
  color: #fff;
  margin-left: 38vw;
  margin-bottom: 4vw;
}
.promise .list .rule image {
  width: 1.5vw;
}
.promise .list .ul {
  padding: 14vw 4vw 4vw 4vw;
  background-color: #FFE1C9;
  border-radius: 2vw;
  position: relative;
}
.promise .list .ul .title {
  position: absolute;
  top: 4vw;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%);
  font-size: 3.73vw;
  color: #9C0000;
  font-weight: 700;
}
.promise .list .ul .title image {
  width: 12vw;
}
.promise .list .ul .title_2 {
  font-size: 3vw;
  position: absolute;
  top: 10vw;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%);
  color: #cc0000;
}
.promise .list .ul .li {
  padding: 3vw 0;
  border-bottom: 1px solid #F0C8A8;
  overflow: hidden;
}
.promise .list .ul .li image {
  width: 9vw;
  height: 9vw;
  border-radius: 9vw;
  float: left;
  margin-right: 2vw;
}
.promise .list .ul .li .info {
  float: left;
}
.promise .list .ul .li .info .name {
  font-size: 3.73vw;
  color: #6A3030;
}
.promise .list .ul .li .info .time {
  font-size: 3.2vw;
  color: #886464;
}
.promise .list .ul .li .isPromise {
  float: right;
  width: 9vw;
  border-radius: 0;
  margin-right: 3vw;
}
.promise .list .ul .li .addIcon {
  float: right;
  font-size: 3.73vw;
  color: #F62E24;
  margin-top: 2vw;
}
@keyframes numdong {
  0% {
    top: -4vw;
    transform: scale(1.1);
  }
  25% {
    top: -5vw;
    transform: scale(1.2);
  }
  50% {
    top: -6vw;
    transform: scale(1.3);
  }
  75% {
    top: -7vw;
    transform: scale(1.4);
  }
  100% {
    top: -8vw;
    transform: scale(1.5);
  }
}
